<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移动</title>
    <style type="text/css">
        .mydiv{
            height: 300px;
            width: 600px;
            border: 1px solid gray;
        }
        .liv1{
            height: 300px;
            width: 250px;
            float: left;
        }
        .center{
            height: 300px;
            width: 96px;
            border-left:  1px solid gray;
            border-right:  1px solid gray;
            float: left;
        }
        .riv1{
            height: 300px;
            width: 250px;
            float: left;
        }

        .btn_1{
            height: 30px;
            width: 96px;
            margin-top: 20px;
        }
        .btn_2{
            height: 30px;
            width: 96px;
            margin-top: 20px;
        }
        .top{
            height: 30px;
            width: 600px;
            border: 1px solid gray;
            line-height: 30px;
        }
    </style>
    <script>
        //用来保存选中的div
        var selected;
        //我的好友名单
        var friends = ['张三','李四','王五','赵六','诸葛亮'];
        //添加数据的方法
        var add = function (name) {
            //添加Div
            var div = document.createElement('div');
            div.textContent = name;
            div.className = 'item';
            div.style.borderBottom ='1px solid gray';

            //添加div里的删除功能
            var x = document.createElement('span');//产生一个span
            x.style.float = 'right';
            x.style.marginRight = '5px';
            x.textContent = 'x';//输入文字 'x'
            x.title = '删除';
            x.style.cursor = 'pointer';//鼠标小手
            x.onclick = function () {
                if (confirm('您是否要删除？')) {
                    $('liv').removeChild(this.parentNode);//parentNode指父级元素
                }
            };
                div.appendChild(x);

            //添加div中的点击事件
            div.onclick = function () {

                //清除之前的选中样式
                if (null != selected) {
                    selected.style.backgroundColor = '';
                }
                //定义选中div的背景颜色
                //this表示当前引用的对象 this中的对象是指 当前循环或者所在事件的'arr[i]'
                this.style.backgroundColor = '#b8b8b8';
                //保存选中的div背景样式
                selected = this;
            };

            return div;
        };
        //定义通过id获取页面元素的方法
        var $ = function (id) {
            return document.getElementById(id);
        };
        //定义通过class获取页面元素的方法
        var $list = function (div1) {
            return document.getElementsByClassName(div1);
        };

        //定义窗口的拉伸宽高
        var win_width =0;
        var win_height =0;
        //添加弹跳添加好友div框

        var win = function () {
            //背景层
            var back = document.createElement('div');
            back.style.backgroundColor = '#bfbfbf';
            back.style.opacity = '0.6';
            back.style.height = document.documentElement.clientHeight + 'px';
            back.style.width = document.documentElement.clientWidth + 'px';
            back.style.position = 'absolute';
            back.style.left = '0';
            back.style.top = '0';
            back.id = 'back';

            //小窗口
            var tianjia = document.createElement('div');
            tianjia.style.height = win_height;
            tianjia.style.width = win_width;
            tianjia.style.backgroundColor ='#bababa ';
            tianjia.style.position = 'absolute';
            tianjia.style.top= (document.documentElement.clientHeight-win_height)/2+'px';
            tianjia.style.left= (document.documentElement.clientWidth-win_width)/2+'px';
            tianjia.id = 'tianjia';

            //标题栏
            var tianjia1 = document.createElement('div');
            tianjia1.style.height = '30px';
            tianjia1.style.width = '400px';
            tianjia1.style.textIndent = '20px';
            tianjia1.style.borderBottom = '1px solid #6f6f6f';
            tianjia1.style.lineHeight= '30px';
            tianjia1.textContent= '添加好友';

            //x
            var tianjia2 = document.createElement('div');
            tianjia2.style.float = 'right';
            tianjia2.style.marginRight ='20px';
            tianjia2.style.height = '20px';
            tianjia2.style.width = '20px';
            tianjia2.style.cursor = 'pointer';
            tianjia2.textContent = 'x';
            tianjia2.onclick=function () {
                back.style.display='none';
                tianjia.style.display='none';
            };

            //输入文本框
            var text = document.createElement('div');
            text.style.height = '120px';
            text.style.width = '400px';
            text.style.lineHeight = '120px';
            text.style.textIndent = '50px';
            text.style.borderBottom= '1px solid #6f6f6f';
            text.textContent = '请输入好友名称　';

            var _input = document.createElement('input');

            //按钮
            var bottom = document.createElement('div');
            bottom.style.height = '50px';
            bottom.style.lineHeight = '50px';
            bottom.style.textAlign = 'center';
            var btn1 =  document.createElement('button');
            btn1.textContent = '确定';
            btn1.onclick=function () {
                var dd=add(_input.value);
                $('liv').appendChild(dd);

                back.style.display='none';
                tianjia.style.display='none';
            };
            var btn2 =  document.createElement('button');
            btn2.textContent = '取消';
            btn2.onclick=function () {
                back.style.display='none';
                tianjia.style.display='none';
            };

      //放置在文档中
            document.body.appendChild(back);
            document.body.appendChild(tianjia);
            tianjia.appendChild(tianjia1);
            tianjia1.appendChild(tianjia2);
            tianjia.appendChild(text);
            text.appendChild(_input);
            tianjia.appendChild(bottom);
            bottom.appendChild(btn1);
            bottom.appendChild(btn2);
        };



        //页面完成加载的时候
        window.onload = function () {
            //选中的功能
             //获取左边div里所有的选项div
            var arr = $list('div1');

            //添加删除功能
            for (var i= 0;i<arr.length;i++){
                var x = document.createElement('span');//产生一个span
                x.style.float = 'right';
                x.style.marginRight = '5px';
                x.textContent = 'x';//输入文字 'x'
                x.title = '删除';
                x.style.cursor = 'pointer';//鼠标小手
                x.onclick = function () {
                    if(confirm('您是否要删除？')){
                        $('liv').removeChild(this.parentNode);//parentNode指父级元素
                    }
                };
                arr[i].appendChild(x);
            }

            //遍历所有的选项div，给没个选项div添加点击事件
            //for循环，从数组站位符0开始，所以i定义为=0，然后arr.length表示数组的长度
            for (var i= 0;i<arr.length;i++){
                //arr[i] 表示数组中要选中的占位符，如0,1,2,3，数组中从0开始
                arr[i].onclick = function () {

                    //清除之前的选中样式
                    if (null !=selected){
                        selected.style.backgroundColor = '';
                    }
                    //定义选中div的背景颜色
                    //this表示当前引用的对象 this中的对象是指 当前循环或者所在事件的'arr[i]'
                    this.style.backgroundColor ='#b8b8b8';
                    //保存选中的div背景样式
                    selected = this;
                };
            }
            //初始化数据 把自己已有的好友名单显示出来
            for ( var i=0;i< friends.length;i++){
                //构建一个Div的好友数据
                var dd = add(friends[i]);
                //添加至左边的div
                $('liv').appendChild(dd);
            }
            //右移按钮的事件
            $('btn1').onclick = function () {
                //如果没有选中div则提示
                if(null == selected){
                    alert('您还没选择！');
                }else {
                    //将选中的div移至右边的div
                    $('riv').appendChild(selected);
                    //清除掉移动后的div的背景
                    selected.style.backgroundColor='';
                    //清除左边div的选中的状态
                    selected  = null;
                }
            };
            //左移按钮的事件
            $('btn2').onclick = function () {
                //如果没有选中div则提示
                if(null == selected){
                    alert('您还没选择！');
                }else {
                    //将选中的div移至右边的div
                    $('liv').appendChild(selected);
                    //清除掉移动后的div的背景
                    selected.style.backgroundColor='';
                    //清除左边div的选中的状态
                    selected  = null;
                }
            };
            //点击添加好友的点击事件
            $('btn').onclick =function () {
                /*var  fname = $('txt').value;
                var div = add(fname);
                $('liv').appendChild(div);
                $('txt').value = '';*/
                win();
            };
            //x

            var _w = document.documentElement.clientWidth;
            var _h = document.documentElement.clientHeight;
        };
        window.onresize = function () {
            $('back').style.width = document.documentElement.clientWidth + 'px';
            $('back').style.height = document.documentElement.clientHeight + 'px';

            $('tianjia').style.top = (document.documentElement.clientHeight-win_height)/2+'px';
            $('tianjia').style.left = (document.documentElement.clientWidth-win_width)/2+'px';
        };

    </script>
</head>
<body>


<button id="btn">添加好友</button><!--请输入好友的名称：<input id="txt" type="text"/>-->
<div class="top">
    <div style="margin-left: 120px;float: left">好友</div>
    <div style="margin-right: 120px;float: right;">黑名单</div>
</div>
<div class="mydiv">
    <div id="liv" class="liv1">

    </div>
    <div class="center">
        <button id="btn1" class="btn_1">右移</button>
        <button id="btn2" class="btn_2">左移</button>
    </div>
    <div id="riv" class="riv1">
    </div>
</div>

</body>
</html>